<template>
  <div class="app-container">

    <el-card style="margin-top: 20px">

      <div class="qu-content">

        <p>【{{ quData.quType===1?'单选题':'多选题' }}】{{ quData.content }}</p>
        <p v-if="quData.image!=null && quData.image!=''">
          <el-image :src="quData.image" style="max-width:80%;" />
        </p>
        <div v-if="quData.quType === 1">
          <el-radio-group v-model="radioValues" readonly>
            <el-radio v-for="an in quData.answerList" :label="an.id" readonly>{{ an.content }}</el-radio>
          </el-radio-group>
        </div>

        <!-- 多选题 -->
        <div v-if="quData.quType === 2">
          <el-checkbox-group v-model="multiValues" readonly>
            <el-checkbox v-for="an in quData.answerList" :label="an.id">{{ an.content }}</el-checkbox>
          </el-checkbox-group>
        </div>

      </div>

    </el-card>

    <el-card class="qu-analysis" style="margin-top: 20px">
      错题解析：
      <div style="margin-top: 10px">
        <el-tooltip content="调用AI生成本题解析" placement="top">
          <el-button class="ai-analyze-btn" type="primary" size="mini" @click="handleAiAnalysis">
            <svg-icon icon-class="education" style="margin-right: 6px" />
            AI解析
          </el-button>
        </el-tooltip>
      </div>
    </el-card>

    <el-card class="qu-analysis" style="margin-top: 20px; margin-bottom: 30px">
      选项解析：
      <div v-for="an in quData.answerList" v-if="an.analysis" class="qu-analysis-line">
        <p style="color: #555;">{{ an.content }}：</p>
        <p style="color: #1890ff;">{{ an.analysis }}</p>
      </div>
      <p v-if="analysisCount === 0">暂无选项解析</p>

    </el-card>

    <el-button type="info" @click="onCancel">返回</el-button>

    <el-dialog title="AI解析" :visible.sync="aiDialogVisible" width="580px">
      <div v-loading="aiLoading" style="min-height: 120px; white-space: pre-wrap; line-height: 22px; color: #333">
        {{ aiText }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="aiDialogVisible=false">关 闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { fetchDetail } from '@/api/qu/qu'
import { aiAnalysis } from '@/api/ai'

export default {
  name: 'QuView',
  data() {
    return {

      quData: {

      },

      radioValues: '',
      multiValues: [],
      analysisCount: 0

      ,aiDialogVisible: false
      ,aiLoading: false
      ,aiText: ''

    }
  },
  created() {
    const id = this.$route.params.id
    if (typeof id !== 'undefined') {
      this.fetchData(id)
    }
  },
  methods: {

    fetchData(id) {
      fetchDetail(id).then(response => {
        this.quData = response.data

        this.quData.answerList.forEach((an) => {
          // 解析数量
          if (an.analysis) {
            this.analysisCount += 1
          }

          // 用户选定的
          if (an.isRight) {
            if (this.quData.quType === 1) {
              this.radioValues = an.id
            } else {
              this.multiValues.push(an.id)
            }
          }
        })
      })
    },
    async handleAiAnalysis() {
      const tags = ['A','B','C','D','E','F','G','H','I','J','K','L']
      const answers = (this.quData.answerList || []).map((an, idx) => ({ tag: tags[idx] || '', content: an.content || '' }))
      const payload = { content: this.quData.content || '', answers }

      this.aiDialogVisible = true
      this.aiLoading = true
      this.aiText = ''
      try {
        const resp = await aiAnalysis(payload)
        if (resp && resp.code === 0) {
          this.aiText = resp.data
        } else {
          this.aiText = (resp && resp.data) || 'AI服务暂不可用'
        }
      } catch (e) {
        this.aiText = '调用失败：' + (e && e.message ? e.message : '未知错误')
      } finally {
        this.aiLoading = false
      }
    },
    onCancel() {
      this.$router.push({ name: 'WrongBookIndex' })
    }

  }
}
</script>

<style scoped>

  .qu-content{
    padding-bottom: 10px;
  }

  .qu-content div{
    line-height: 30px;
  }

  .qu-analysis p{
    color: #555; font-size: 14px
  }
  .qu-analysis-line{
    margin-top: 20px; border-bottom: #eee 1px solid
  }

  .el-checkbox-group label,.el-radio-group label{
    width: 100%;
  }

  .ai-analyze-btn{
    background: linear-gradient(135deg, #409EFF 0%, #2F74FF 50%, #1F59FF 100%);
    border: none;
    border-radius: 18px;
    padding: 8px 14px;
    box-shadow: 0 4px 12px rgba(64,158,255,0.35);
    display: inline-flex;
    align-items: center;
  }
  .ai-analyze-btn:hover{
    filter: brightness(1.05);
    box-shadow: 0 6px 16px rgba(64,158,255,0.45);
  }

</style>

